<template>
    <div class="subcomponent-container">
        <h3>发表评论</h3>
        <hr>
        <textarea class="text" placeholder="请输入要评论的内容" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="btn">提交</mt-button>
        <div class="cmt-box">
              <div class="cmt-item" v-for="(item, i) in critic" :key="i">
                    <div class="cmt-title">
                        第{{i+1}}楼 用户: {{item.user_name}} 发表时间：{{item.add_time | newsDate}}
                    </div>
                    <div class="cmt-body">
                        {{item.content === '' ? '这家伙很懒，什么也没留下' : item.content}}
                    </div>
            </div>  
        </div>
        <mt-button type="danger" size="large" plain @click="add">加载更多</mt-button>
    </div>
</template>

<script>
// 导入获取评论详细内容的路径
    import {getCritic} from '../../api/index.js'
// 导入提交评论
    import {postBtn} from '../../api/index.js'
// 导入Toast 弹窗 这是js 必须按需导入
import { Toast } from "mint-ui";    
    export default {
        data(){
            return {
                pagesize: 1, //默认为第一页
                critic: [], // 评论列表的总内容
                msg: '' // 用户评论输入的内容
            }
        },
        props: ['cid'], // 接收父组件传送的id
        methods: {
            getCritics(){
                // 创建一个对象，得到id和pagesize
                let params = {
                    id: this.cid,
                    pagesize: this.pagesize
                }
                getCritic(params).then(res => {
                    console.log(res)
                    if(res.data.status === 0 ) {
                        // concat 新加载的内容不会覆盖旧数据
                        this.critic = this.critic.concat(res.data.message)
                    }else {
                        Toast('获取评论内容失败')
                    }
                })
            },
            // 加载更多
            add(){
                this.pagesize++ // 点击后从页码1 自身++ 
                // 重新调用 获取评论列表的函数
                this.getCritics()
            },
            btn(){
                // 先校验用户输入的内容是否正确
                if(this.msg.trim().length === 0) {
                    return Toast('内容不能为空!')
                }
                // 创建一个对象
                let comment = {
                    id: this.cid,
                    msg: this.msg.trim()
                }
                postBtn(comment).then(res => {
                    console.log(res)
                    if(res.data.status === 0) {
                        // 创建一个对象 然后unshift到数组中
                        let cmt = {
                            user_name: '匿名用户',
                            add_time: new Date(),
                            content: this.msg

                        }
                        this.critic.unshift(cmt)
                    }else {
                        Toast('发表失败!')
                    }
                })

            }
        },
        created(){
            this.getCritics()
        }

    }
</script>

<style lang="scss" scoped>
 .subcomponent-container {
     h3 {
         font-size: 16px;
     }
     .text {
         margin: 0;
         height: 150px;
         font-size: 14px;
     }
     .cmt-box {
         font-size: 12px;
         .cmt-item {
             width: 100%;
             .cmt-title {
                 background-color: #ccc;
                 line-height: 35px;
             }
             .cmt-body {
                 line-height: 35px;
                 text-indent: 2em;
             }
         }

     }
 }

</style>

